<template>
	<view>
		<u-navbar
			title="详情"
			:autoBack="true"
			placeholder
		>
		</u-navbar>
		<scroll-view :scroll-y="true" :style="{height: scrollViewHeight}">
			<view style="height: 16rpx;"/>
			<view style="padding: 16rpx 32rpx;">
				<view style="padding: 32rpx;background-color: #fff;border-radius: 16rpx;">
					<view class="detail-title">
						<text>地块信息</text>
						<view :style="{backgroundColor: appColor}" class="detail-title-color"></view>
					</view>
					<view class="detail-cell">
						<text class="detail-cell-l">地块名称: </text>
						<text class="detail-cell-r">{{detail.landId_dictText}}</text>
					</view>
					<view class="detail-cell">
						<text class="detail-cell-l">种植品种: </text>
						<text class="detail-cell-r">{{detail.cropId_dictText}}</text>
					</view>
					<view class="detail-cell">
						<text class="detail-cell-l">地块面积: </text>
						<text class="detail-cell-r">{{detail.landInfo.area | moneyFormat}}{{detail.landInfo.areaUnit}}</text>
					</view>
				</view>
			</view>
			<view style="padding: 16rpx 32rpx;">
				<view style="padding: 32rpx;background-color: #fff;border-radius: 16rpx;">
					<view class="detail-title">
						<text>人员信息</text>
						<view :style="{backgroundColor: appColor}" class="detail-title-color"></view>
					</view>
					<view class="detail-cell">
						<text class="detail-cell-l">管理人员: </text>
						<text class="detail-cell-r">{{detail.manageId_dictText}}</text>
					</view>
					<view class="detail-cell" style="margin-bottom: 0;">
						<text class="detail-cell-l">电话号码: </text>
						<text class="detail-cell-r">{{detail.phone}}</text>
					</view>
				</view>
			</view>
			<view style="padding: 16rpx 32rpx;">
				<view style="padding: 32rpx;background-color: #fff;border-radius: 16rpx;">
					<view class="detail-title">
						<text>巡地信息</text>
						<view :style="{backgroundColor: appColor}" class="detail-title-color"></view>
					</view>
					<view class="detail-cell">
						<text class="detail-cell-l">巡地类型: </text>
						<text class="detail-cell-r">{{detail.operation_dictText}}</text>
					</view>
					<view class="detail-cell">
						<text class="detail-cell-l">开始时间: </text>
						<text class="detail-cell-r">{{detail.startTime}}</text>
					</view>
					<view class="detail-cell">
						<text class="detail-cell-l">结束时间: </text>
						<text class="detail-cell-r">{{detail.endTime}}</text>
					</view>
					<view class="detail-cell">
						<text class="detail-cell-l">巡地描述: </text>
						<text class="detail-cell-r">{{detail.remark}}</text>
					</view>
					<view class="detail-cell">
						<text class="detail-cell-l">巡地照片: </text>
						<view style="height: 32rpx;"/>
						<view style="display: flex;align-items: center;">
							<view @click="previewImg(index)" v-for="(item, index) in imgList" :key="index" :style="{marginRight: imgList.length-1 === index ? 0 : '16rpx'}">
								<u--image radius="8rpx" mode="aspectFill" :src="item" width="120rpx" height="120rpx"></u--image>
							</view>
						</view>
					</view>
					<view class="detail-cell" style="margin-bottom: 0;">
						<text class="detail-cell-l">巡地视频: </text>
						<view style="height: 32rpx;"/>
						<view style="display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;">
							<view v-for="(item, index) in videoList" :key="index" style="margin-bottom: 16rpx;">
								 <video object-fit="fill" :id="`myVideo${index}`" :src="item" controls></video>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		computed: {
			...mapState(['detail']),
			appColor() {
				return this.appPrimaryColor || '#f40215'
			},
			scrollViewHeight() {
				return this.scrollHeight - 44 + 'px';
			},
			imgList() {
				if(this.detail.image) {
					return this.detail.image.split(',');
				}
				return []
			},
			videoList() {
				if(this.detail.video) {
					return this.detail.video.split(',');
				}
				return []
			}
		},
		methods: {
			// 预览图片
			previewImg(current) {
				let urls = this.imgList;
				uni.previewImage({
					current,
					urls,
				});
			},
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
</style>

<style lang="scss" scoped>
	video {
		width: 40vw;
		height: 160rpx;
	}
	.detail-title {
		font-size: 36rpx;
		line-height: 36rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 32rpx;
		position: relative;
		padding-left: 16rpx;
		.detail-title-color {
			position: absolute;
			width: 4rpx;
			height: 100%;
			left: 0;
			top: 0;
		}
	}
	.detail-cell {
		font-size: 32rpx;
		margin-bottom: 32rpx;
		.detail-cell-l {
			color: #000;
			padding-right: 16rpx;
		}
		.detail-cell-r {
			color: #333;
		}
	}
</style>